import React, { Component } from 'react'
import {connect} from 'react-redux'

import BlogItem from './BlogItem'

//import {getPosts} from '../../../services/Posts'

import {fetchBlogList} from '../../../actions/blog'

//import {Provider} from 'react-redux'
//import store from '../../../store'

// 在redux官网（container容器组件（数据来源于redux 和 component（数据来源于props，例如公共组件）展示组件
class BlogList extends Component {
    // 通过prop-types对数据做检查（略）

    componentDidMount(){
        // getPosts()
        // .then(resp => {
        //     console.log(resp)
        // })
        this.props.fetchBlogList()
    }

    render() {
        const {
            list,
            isLoading,
            errMsg
        } = this.props

        const hasError = Boolean(errMsg)
        
        console.log("如果props输出dispatch函数表示连接store成功",this.props)
        return (
            isLoading?
            <div>正在加载......</div>
            :
            hasError ? <div>{errMsg}</div>
            :
            <ul>
                {/* <BlogItem /> */}
                {
                    this.props.list.map(blog => {
                        return (
                            <BlogItem key={blog.id} {...blog} />
                        )
                    })
                }
            </ul>
        )
    }
}

const mapState = state => ({
    // 解构store引入的blog reduecers 传递的对象.这样就会把者两个值解构到redux里面去了
    //blogList: state.blog
    list: state.blog.list,
    isLoading: state.blog.isLoading,
    errMsg: state.blog.errMsg
})

export default connect(mapState, {fetchBlogList} )(BlogList)
